<template>
  <div class="icons-container">
    <aside>
      <el-input v-model="iconName" style="position: relative;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
        <i slot="suffix" class="el-icon-search el-input__icon" />
      </el-input>
    </aside>
    <el-tabs type="border-card">
      <el-tab-pane label="Svg Iconfont Icons" :style="svgTabPaneStyle">
        <div class="icon-note"><i class="el-icon-question"></i>可用于 菜单、按钮 等其他地方</div>
        <div v-for="item of svgIconfontIconList" :key="item" v-clipboard="generateIconCode(item)" v-clipboard:success="successHandler">
          <el-tooltip placement="bottom" class="icon-tip">
            <div slot="content">{{ generateIconCode(item) }}</div>
            <div class="icon-item">
              <svg-icon :icon-class="item" class-name="disabled" />
              <span>{{ item }}</span>
            </div>
          </el-tooltip>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Svg Icons" :style="svgTabPaneStyle">
        <div class="icon-note"><i class="el-icon-question"></i>可用于 菜单、按钮 等其他地方</div>
        <div v-for="item of svgIconList" :key="item" v-clipboard="generateIconCode(item)" v-clipboard:success="successHandler">
          <el-tooltip placement="bottom" class="icon-tip">
            <div slot="content">{{ generateIconCode(item) }}</div>
            <div class="icon-item">
              <svg-icon :icon-class="item" class-name="disabled" />
              <span>{{ item }}</span>
            </div>
          </el-tooltip>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Element-UI Icons" :style="svgTabPaneStyle">
        <div class="icon-note"><i class="el-icon-question"></i>可用于除 菜单 以外的其他地方</div>
        <div v-for="item of elementIconList" :key="item" v-clipboard="generateElementIconCode(item)" v-clipboard:success="successHandler">
          <el-tooltip placement="bottom" class="icon-tip">
            <div slot="content">{{ generateElementIconCode(item) }}</div>
            <div class="icon-item">
              <i :class="'el-icon-' + item" />
              <span>{{ item }}</span>
            </div>
          </el-tooltip>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import svgIconfontIcons from '@/assets/icons/svg-iconfont-icons'
  import svgIcons from '@/assets/icons/svg-icons'
  import elementIcons from '@/assets/icons/element-icons'

  export default {
    name: 'Icons',
    data() {
      return {
        iconName: '',
        svgIconfontIconList: svgIconfontIcons,
        svgIconList: svgIcons,
        elementIconList: elementIcons
      }
    },
    computed:{
      svgTabPaneStyle(){
        return {
          'height': window.innerHeight - 250 + 'px',
          'overflow': 'auto'
        }
      }
    },
    methods: {
      generateIconCode(symbol) {
        return `<svg-icon icon-class="${symbol}" />`
      },
      generateElementIconCode(symbol) {
        return `<i class="el-icon-${symbol}" />`
      },
      filterIcons() {
        this.svgIconfontIconList = svgIconfontIcons;
        this.svgIconList = svgIcons;
        this.elementIconList = elementIcons;
        if (this.iconName) {
          this.svgIconfontIconList = this.svgIconfontIconList.filter(item => item.includes(this.iconName))
          this.svgIconList = this.svgIconList.filter(item => item.includes(this.iconName))
          this.elementIconList = this.elementIconList.filter(item => item.includes(this.iconName))
        }
      },
      successHandler(e){
         this.$message.success("已复制 "+e.value);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .icons-container {
    margin: 10px 20px 0;
    overflow: hidden;

    .icon-note{
      margin: 0 15px;
      color: red;
    }

    .icon-tip{
      margin: 15px !important;
      height: 71px !important;
    }

    .icon-item {
      margin: 20px;
      height: 85px;
      text-align: center;
      width: 100px;
      float: left;
      font-size: 30px;
      color: #24292e;
      cursor: pointer;
    }

    span {
      display: block;
      font-size: 16px;
      margin-top: 10px;
    }

    .disabled {
      pointer-events: none;
    }
  }
</style>
